<template>
  <cml-module-item
    :title="titleText"
    :titleMore="titleMore"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <a-switch
      size="small"
      :disabled="false"
      :checked="isStart"
      @change="change($event, true)"
    />
    <!-- <template v-slot:detail>
      <gesture-recognize-more></gesture-recognize-more>
    </template> -->
  </cml-module-item>
</template>
<script>
import { Switch } from 'ant-design-vue'
import CmlModuleItem from '../../cml-module-item'
import GestureRecognizeMore from './morePanel'
import * as anov from 'anov-core'
import aiMediaCheck from '../../../util/aiMediaCheck'

export default {
  name: 'GestureRecognize',
  components: {
    ASwitch: Switch,
    CmlModuleItem,
    GestureRecognizeMore
  },
  model: {},
  props: {},
  data() {
    return {
      byUser: false,
      type: 'gestureRecognize'
    }
  },
  computed: {
    ...anov.gestureRecognizeServer.mapState(['isStart']),
    ...anov.envServer.mapState(['videoStatus']),
    titleText() {
      return this.$t('cmlpanel.gestures')
    },
    titleMore() {
      return this.$t('cmlpanel.gestures')
    }
  },
  watch: {
    isStart(v) {
      this.change(v)
    }
  },
  created() {},
  mounted() {
    //初始化状态
    anov.gestureRecognizeServer.addEventListener(
      'gestureMatch',
      this.onGestureMatch.bind(this)
    )

    anov.gestureRecognizeServer.addEventListener('readyStart', () => {
      this.change(true, true)
    })
    anov.gestureRecognizeServer.addEventListener('start', () => {
      aiMediaCheck.videoUsable()
      this.podcast(true)
    })
    anov.gestureRecognizeServer.addEventListener('stop', () => {
      this.podcast(false)
    })
    anov.gestureRecognizeServer.addEventListener('error', () => {
      this.setVideoIsAvailable(false)
      //摄像头不可用
      aiMediaCheck.videoUnusable(this.$t('cmlpanel.gestures'))
    })
  },
  beforeDestroy() {},
  methods: {
    ...anov.envServer.mapMutations(['setVideoStatus', 'setVideoIsAvailable']),
    change(isStart, byUser) {
      // this.byUser = byUser === true ? byUser : this.byUser
      if (isStart == this.isStart) {
        this.byUser = false
        return
      }
      let params = {
          type: this.type,
          msg: this.$t('cmlpanel.gestures'),
          //确认开启弹框确认按钮回调
          okCallback: () => {},
          //确认开启弹框取消按钮回调
          cancelCallback: () => {
            this.rloading = false
          },
          //正常开启回调
          startCallback: () => {
            anov.gestureRecognizeServer.start()
          }

      }
      if (isStart) {
        // 判断开启确认弹框 或 无效弹框 或 正常开启
        aiMediaCheck.getVideoStatus({...params})
      } else {
        //关闭
        anov.gestureRecognizeServer.stop()
      }
    },
    onGestureMatch(e) {
      let gesture = e.result
      if (gesture.up) {
        // this.$router.forward()
      } else if (gesture.down) {
        //this.$router.back()
      } else if (gesture.left) {
        app.pageServer.go(-1)
        anov.gestureRecognizeServer.addInfo('切换到上一个菜单')
      } else if (gesture.right) {
        app.pageServer.go(1)
        anov.gestureRecognizeServer.addInfo('切换到下一个菜单')
      }
    },
    // 语音反馈
    podcast(isStart) {
      let msg =
        this.titleText +
        (isStart ? this.$t('cmlpanel.start') : this.$t('cmlpanel.stop'))
      anov.voiceFeedbackServer.speak(msg)
      app.msg({ type: 'info', content: msg })
    }
  }
}
</script>
<style lang="scss" scoped></style>
